<template>
  <div class="view-wrapper">
      <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
          <el-form-item label="" prop="name">
            <el-input v-model="queryParams.name" placeholder="活动名称" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="活动状态："  prop="eventsStatus">
            <el-select v-model="queryParams.eventsStatus" placeholder="全部" size="small">
              <el-option v-for="item in eventsStatusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动类型："  prop="type">
            <el-select v-model="queryParams.type" placeholder="全部" size="small">
              <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
     
      <div class="listBox">
        <div style="margin-bottom: 14px">
          <el-button type="primary" @click="handleAdd">新增活动</el-button>
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="活动名称" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="活动类型" align="center" prop="type" :show-overflow-tooltip="true"  :formatter="typeatter"/>
          <el-table-column label="活动链接" align="center" prop="url" :show-overflow-tooltip="true" />
          <el-table-column label="链接是否生效" align="center" prop="urlStatus" :show-overflow-tooltip="true" :formatter="urlStatusatter"/>
          <el-table-column label="编辑时间" align="center" prop="updateTime" :show-overflow-tooltip="true" />
          <el-table-column label="活动状态" align="center" prop="eventsStatus" :show-overflow-tooltip="true" :formatter="eventsStatusatter"/>
          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)">
                编辑  </el-button>
              <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.urlStatus == 1">
                停用链接</el-button> 
              <el-button size="mini" type="text" @click="handleStatus(scope.row)" v-if="scope.row.urlStatus == 2">
                启用链接</el-button> 
              <el-button size="mini" type="text" @click="handleConfig(scope.row)">
                活动配置</el-button>
                <el-button size="mini" type="text" @click="handleBettingDetail(scope.row)">
                 投注明细</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

    </div>
    <add-activity
      ref="childRef"
      v-if="addActivity"
      :id="id"
      :pathType="pathType"
      :visible.sync="addActivity"
      @success="_handleSuccess" 
    />
  </div>
  
</template>

<script>
  import {
    adminDict,
    guessList,
    statusGuess,
  } from "@/api/blindBox/quiz";
  import addActivity from './components/addActivity'
  export default {
    name: "Customer",
    components: {
      addActivity
    },
    data() {
      return {
        id: '',
        addActivity: false,
        pathType: 'add',
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          eventsStatus: null,
          name: '',
          type: '',
        },
        typeList: [
          {id: '',value: '全部',},
          {id: '1',value: '支持竞猜',},
          {id: '2',value: '冠军竞猜',}
        ],
        eventsStatusList:[
          {id: '',value: '全部',},
          {id: '1',value: '进行中',},
          {id: '2',value: '待揭晓',},
          {id: '3',value: '已结束',},
          {id: '4',value: '奖励已发放',},
        ],
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.getList();
    },
    methods: {
      /** 查询竞猜活动列表 */
      getList() {
        this.loading = true;
       
        guessList(this.queryParams).then(response => {
          this.total = response.result.total
         
            this.customerList = response.result.records
            this.customerList = this.customerList.map(item => {
              // console.log('item',item)
              Object.keys(item).forEach(key => {
                if (item[key] === '') {
                  item[key] = '-'
                }
              })
              return item
            })
            
            this.loading = false;
          
        }).finally(()=>{
          this.loading = false;
        })
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        this.date = []
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      /** 详情按钮操作 */
      handleView(row,type) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/Prepaid-details",
          query: {
            id: row.id,
            type: type
          },
        })
      },
      //推荐用户列表
      handleRecommended(row) {
        // this.$refs.dialog.open(row.id, true);
        this.$router.push({
          path: "/members/recommended-list",
          query: {
            id: row.id,
          },
        })
      },
       //coin详情
       handleCoin(row) {
        this.$router.push({
          path: "/members/coin-detail",
          query: {
            id: row.id,
          },
        })
      },
      //新增活动
      handleAdd(){
        this.addActivity = true
        this.pathType = 'add'
      },
      //编辑活动
      handleEdit(row){
        this.addActivity = true
        this.id = row.id
        this.pathType = 'edit'
      },
      //停用/启用链接
      handleStatus(row){
        if(row.urlStatus == 1){
          var title = '是否停用链接'
          var urlStatus = 2
        }else if(row.urlStatus == 2){
          var title = '是否启用链接'
          var urlStatus = 1
        }
        this.$confirm(title, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            var data = {
              id: row.id,
              urlStatus: urlStatus
            }
            statusGuess(data).then(res => {
              this.$message.success('操作成功')
              this.getList()
            })
          }).catch(() => {});
      },
      //活动配置
      handleConfig(row){
        if(row.type == 1){
          this.$router.push({
            path: '/blindBox/quiz-config-one',
            query: {
              guessActivityId: row.id
            }
          })
        }else if(row.type == 2){
          this.$router.push({
            path: '/blindBox/quiz-config-two',
             query: {
              guessActivityId: row.id
            }
          })
        }
      },
      //投注明细
      handleBettingDetail(row){
        if(row.type == 1){
          this.$router.push({
            path: '/blindBox/quiz-betting-one',
            query: {
              guessActivityId: row.id
            }
          })
        }else if(row.type == 2){
          this.$router.push({
            path: '/blindBox/quiz-betting-two',
             query: {
              guessActivityId: row.id
            }
          })
        }
      },
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
      },
      typeatter(row){
        if(row.type == 1){
          return '支持竞猜'
        }else if(row.type == 2){
          return '冠军竞猜'
        }
      },
      eventsStatusatter(row){
        if(row.eventsStatus == 1){
          return '进行中'
        }else if(row.eventsStatus == 2){
          return '待揭晓'
        }else if(row.eventsStatus == 3){
          return '已结束'
        }else if(row.eventsStatus == 4){
          return '奖励已发放'
        }else{
          return '-'
        }
      },
      urlStatusatter(row){
        if(row.urlStatus == 1){
          return '启用'
        }else if(row.urlStatus == 2){
          return '停用'
        }
      },
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
</style>
